import { useEffect, useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Loading } from "react-vant";
import classnames from "classnames";
import { AudioContext, PlayMusicStateContext } from "@/reducers/playMusic";
import styles from "./index.module.scss";
import { formatTime } from "@/helpers/common";
import LyricScroll from "@/components/Lyric/index";
import ProgressBar from "./progressBar/index";

interface IProps {
  closeSongFun(): void;
}
const Playlist: React.FC<IProps> = ({ closeSongFun }) => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState<boolean>(true);
  const [mainState, setMainState] = useState<boolean>(true);
  const audioInfo = useContext(AudioContext);
  const musicInfo = useContext(PlayMusicStateContext);
  useEffect(() => {
    if (musicInfo.musicId) {
      localStorage.setItem("musicID", JSON.stringify(musicInfo));
    }
    setTimeout(() => {
      setLoading(false);
    });
    return () => {};
  }, []);

  const style = {
    backgroundImage: `url(${musicInfo.picUrl})`,
  };

  const setAudioValue = (value: number) => {
    audioInfo!.ref!.current!.currentTime = value * (audioInfo.duration || 0);
  };

  const toComment = () => {
    closeSongFun();
    navigate(`/songcomment`, {
      state: {
        type: 0,
        id: musicInfo.musicId,
      },
    });
  };

  const mainStateStyle = {
    display: "none",
  };

  const play = () => {
    audioInfo.controls?.play();
  };
  const pause = () => {
    audioInfo.controls?.pause();
  };

  return (
    <div>
      {loading ? (
        <div className={styles.loading_wrap}>
          <Loading color="red" />
        </div>
      ) : (
        <div className={styles.song}>
          <div className={styles.bg} style={style}></div>

          <div className={styles.playHead}>
            <div className={styles.left}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M368.576 116.672a16 16 0 0 0-22.656 0l-45.248 45.248a16 16 0 0 0 0 22.656l327.936 327.936-327.936 327.936a16 16 0 0 0 0 22.592l45.248 45.248a16 16 0 0 0 22.656 0l384.512-384.448a16 16 0 0 0 0-22.656L368.576 116.672z"></path>
              </svg>
            </div>
            <div className={styles.center}>
              <div className={styles.musicName}>{musicInfo.musicName}</div>
              <div className={styles.songName}>{musicInfo.song}</div>
            </div>
            <div className={styles.right}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"></path>
              </svg>
            </div>
          </div>
          <div
            className={styles.playPic}
            onClick={() => setMainState((state) => !state)}
          >
            <div
              className={styles.song_disc}
              style={mainState ? {} : mainStateStyle}
            >
              <div className={styles.song_turn}>
                <div className={styles.song_img_wrap}>
                  <div
                    className={classnames(
                      styles.img_wrap,
                      !audioInfo.state?.paused ? styles.animationState : ""
                    )}
                  >
                    <img src={musicInfo.picUrl} alt="" />
                  </div>
                </div>
              </div>
              <div className={styles.song_btn}></div>
            </div>
            <div
              className={styles.lyric_container}
              style={mainState ? mainStateStyle : {}}
            >
              <LyricScroll id={musicInfo.musicId + ""} />
            </div>
          </div>

          <div className={styles.btnFun_wrap}>
            <div className={styles.liveBtnItem}>
              {/* <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M511.575 960.223c-19.778 0-38.257-7.819-52.085-21.991L121.257 588.778c-41.022-55.866-55.385-125.904-40.541-193.627 19.499-88.709 92.489-160.415 181.536-178.424 98.641-19.945 196.411 21.524 249.367 105.454 52.89-83.93 150.795-125.4 249.28-105.454 22.06 4.431 43.403 12.216 63.495 23.045 17.652 9.519 24.296 31.623 14.722 49.309-9.622 17.675-31.682 24.31-49.265 14.733-13.806-7.439-28.37-12.697-43.405-15.751-68.349-13.737-136.586 14.733-173.368 72.959-13.602 21.499-36.535 34.385-61.502 34.385-24.924 0-47.9-12.887-61.458-34.385-36.782-58.226-104.952-86.718-173.402-72.959-61.291 12.406-111.484 61.715-124.919 122.694-10.516 48.012-0.907 95.431 27.015 133.565l9.888 12.025 322.876 331.086 333.827-344.498c26.915-36.793 36.511-84.201 25.952-132.179-1.21-5.629-2.774-11.164-4.609-16.603-6.422-19.027 3.803-39.689 22.887-46.088 19.084-6.376 39.668 3.861 46.067 22.89 2.685 7.851 4.921 15.941 6.733 24.172 14.901 67.701 0.515 137.75-39.398 192.23l-11.97 14.855-327.384 336.02c-13.714 14.172-32.239 21.991-52.04 21.991h-0.066z"></path>
              </svg> */}
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M512 896l-60.8-55.2C236 645.6 93.6 516 93.6 358.4 93.6 229.6 194.4 128 324 128c72.8 0 142.4 33.6 188 87.2C557.6 162.4 627.2 128 700 128c128.8 0 230.4 100.8 230.4 230.4 0 157.6-142.4 287.2-357.6 482.4L512 896z"></path>
              </svg>
              <div className={styles.liveNum}>999+</div>
            </div>
            <div className={styles.dowloadBtnItem}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M490.155 696.835c5.703 5.703 13.229 8.617 20.753 8.496 7.524 0 15.05-2.791 20.875-8.496l179.739-179.739c11.408-11.408 11.408-29.855 0-41.142-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496L540.038 606.176V122.787c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127v483.267L351.562 475.832c-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496c-11.408 11.408-11.408 29.855 0 41.142l179.86 179.86z"></path>
                <path d="M883.007 497.194a29.057 29.057 0 0 0-29.127 29.127c0 189.084-153.767 342.85-342.85 342.85s-342.85-153.767-342.85-342.85c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127c0 54.128 10.559 106.678 31.554 156.194 20.146 47.818 49.152 90.658 85.925 127.553 36.773 36.773 79.735 65.778 127.553 85.925 49.516 20.875 102.066 31.554 156.194 31.554 54.128 0 106.678-10.559 156.194-31.554 47.818-20.146 90.658-49.152 127.553-85.925 36.773-36.773 65.778-79.735 85.925-127.553 20.875-49.516 31.554-102.066 31.554-156.194-0.242-16.02-13.349-29.127-29.37-29.127z"></path>
              </svg>
            </div>
            <div className={styles.btnItem} onClick={() => toComment()}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M337.92 880.64a20.48 20.48 0 0 1-14.4384-34.9184l102.4-102.4A20.48 20.48 0 0 1 440.32 737.28h389.12a82.5344 82.5344 0 0 0 81.92-81.92V266.752a82.5344 82.5344 0 0 0-81.92-81.92H195.072a82.5344 82.5344 0 0 0-81.92 82.432V655.36a82.5344 82.5344 0 0 0 82.432 81.92H296.96a20.48 20.48 0 0 1 0 40.96h-101.888A123.5968 123.5968 0 0 1 71.68 655.36V266.752A123.5968 123.5968 0 0 1 195.072 143.36H829.44a123.5968 123.5968 0 0 1 122.88 123.392V655.36a123.5968 123.5968 0 0 1-122.88 122.88H448.8192l-96.4608 96.3584A20.48 20.48 0 0 1 337.92 880.64z"></path>
                <path d="M317.44 512a40.96 40.96 0 1 1 40.96-40.96 40.96 40.96 0 0 1-40.96 40.96z m0-40.96zM512 512a40.96 40.96 0 1 1 40.96-40.96 40.96 40.96 0 0 1-40.96 40.96z m0-40.96zM706.56 512a40.96 40.96 0 1 1 40.96-40.96 40.96 40.96 0 0 1-40.96 40.96z m0-40.96z"></path>
              </svg>
              <div className={styles.commentNum}>999+</div>
            </div>
            <div className={styles.btnItem}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M512 298.6496a85.3504 85.3504 0 1 0 0-170.6496 85.3504 85.3504 0 0 0 0 170.6496z"></path>
                <path d="M512 512m-85.3504 0a85.3504 85.3504 0 1 0 170.7008 0 85.3504 85.3504 0 1 0-170.7008 0Z"></path>
                <path d="M512 896a85.3504 85.3504 0 1 0 0-170.7008 85.3504 85.3504 0 0 0 0 170.7008z"></path>
              </svg>
            </div>
          </div>

          <div className={styles.progress_bar}>
            <div>
              {audioInfo.currentTime
                ? formatTime(audioInfo.currentTime)
                : "00:00"}
            </div>
            <div className={styles.progressbar_wrap}>
              <ProgressBar
                setAudioValue={setAudioValue}
                precent={
                  (audioInfo?.currentTime || 0) / (audioInfo?.duration || 0)
                }
              />
            </div>
            <div>
              {audioInfo.duration ? formatTime(audioInfo.duration) : "00:00"}
            </div>
          </div>

          <div className={styles.playBtnWrap}>
            <div className={styles.preBtnWrap}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M335.872 888.32C156.16 888.32 10.24 742.4 10.24 562.688c0-179.2 145.92-325.632 325.632-325.632H834.56V145.92l162.304 121.856L834.048 389.12V299.008H333.824c-145.408 0-264.192 118.784-263.68 264.192 0 145.408 118.272 263.68 263.68 263.68h357.888c142.848 0 260.096-116.224 260.608-259.584 0-15.36 11.264-29.184 25.6-31.232 1.536-0.512 3.584-0.512 5.12-0.512 16.384 0 30.208 13.312 30.72 29.184v2.048c0 177.152-144.384 321.024-322.048 321.024H335.872z"></path>
              </svg>
            </div>
            <div className={styles.btnWrap}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"></path>
              </svg>
            </div>
            <div className={styles.playBtnWrap}>
              {!audioInfo.state?.paused ? (
                <div className={styles.play_wrap} onClick={() => pause()}>
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="200"
                    height="200"
                  >
                    <path d="M513.799 62.623c-247.536 0-448.203 200.667-448.203 448.203s200.667 448.203 448.203 448.203 448.203-200.667 448.203-448.203S761.334 62.623 513.799 62.623z m-48.914 623.732c0 17.6-14.4 32-32 32s-32-14.4-32-32v-356c0-17.6 14.4-32 32-32s32 14.4 32 32v356z m159.583 3.256c0 17.6-14.4 32-32 32s-32-14.4-32-32v-356c0-17.6 14.4-32 32-32s32 14.4 32 32v356z"></path>
                  </svg>
                </div>
              ) : (
                <div className={styles.play_wrap} onClick={() => play()}>
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                  >
                    <path d="M512 0C228.072727 0 0 228.072727 0 512s228.072727 512 512 512 512-228.072727 512-512S795.927273 0 512 0z m193.163636 563.2l-218.763636 125.672727c-39.563636 23.272727-88.436364-4.654545-88.436364-51.2V386.327273c0-44.218182 48.872727-72.145455 88.436364-51.2l218.763636 125.672727c37.236364 23.272727 37.236364 79.127273 0 102.4z"></path>
                  </svg>
                </div>
              )}
            </div>
            <div className={styles.nextBtnWrap}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"></path>
              </svg>
            </div>
            <div className={styles.playListWrap}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M42.666667 106.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h896a21.333333 21.333333 0 0 1 0 42.666667H64a21.333333 21.333333 0 0 1-21.333333-21.333333z m21.333333 405.333333h597.333333a21.333333 21.333333 0 0 0 0-42.666667H64a21.333333 21.333333 0 0 0 0 42.666667z m384 341.333333H64a21.333333 21.333333 0 0 0 0 42.666667h384a21.333333 21.333333 0 0 0 0-42.666667z m532.853333-324.513333c-4.5-20.773333-14.666667-50.513333-37.466666-74.266667-11.04-11.493333-23.64-20.093333-37.493334-25.606666-10.306667-7.126667-19.44-16.58-27.153333-28.133334-19.64-29.393333-24.373333-64.04-25.446667-82.08A21.333333 21.333333 0 0 0 810.666667 320v479.586667c-1.413333-1.02-2.846667-2-4.326667-3.006667-27.64-18.433333-64-28.58-102.34-28.58s-74.666667 10.146667-102.34 28.58c-14.253333 9.5-25.56 20.746667-33.613333 33.44-8.88 14-13.38 29.013333-13.38 44.666667s4.5 30.666667 13.38 44.666666c8.053333 12.666667 19.333333 23.94 33.613333 33.44C629.333333 971.186667 665.646667 981.333333 704 981.333333s74.666667-10.146667 102.34-28.58c14.253333-9.5 25.56-20.746667 33.613333-33.44 8.88-14 13.38-29.013333 13.38-44.666666V438a140.893333 140.893333 0 0 0 30.966667 27.82A21.18 21.18 0 0 0 888.666667 468c8.713333 3.2 16.773333 8.606667 23.953333 16.086667 16.733333 17.42 23.806667 41.146667 26.533333 53.733333a21.333333 21.333333 0 1 0 41.706667-9.026667z"></path>
              </svg>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Playlist;
